<template>
    <view class="content">
        <view class="nav flex_b">
            <view :class="{ 'active': nodeStatus == 1 }" class="nav_item flex_c" @click="changeState(1)">进行中</view>
            <view :class="{ 'active': nodeStatus == 2 }" class="nav_item flex_c" @click="changeState(2)">待确认</view>
            <view :class="{ 'active': nodeStatus == 3 }" class="nav_item flex_c" @click="changeState(3)">已完成</view>
        </view>
        <view class="list" v-if="acceptOrderList.length > 0">
            <view class="order_card mb24" v-for="(item, index) in acceptOrderList" :key="index">
                <view class="order_card_head flex_b">
                    <view class="order_card_head_l">订单详情</view>
                    <!-- 订单状态 进行中 -->
                    <view v-if="nodeStatus == 1" class="order_card_head_r" style="color: #00A023;">进行中</view>
                    <!-- 订单状态 待确认 -->
                    <view v-if="nodeStatus == 2" class="order_card_head_r" style="color: #FE6E04;">待确认</view>
                    <!-- 订单状态 已完成 -->
                    <view v-if="nodeStatus == 3" class="order_card_head_r" style="color: #FE6E04;">已完成</view>
                </view>
                <view class="order_card_content">
                    <view class="order_id">
                        订单编号: {{ item.id }}
                    </view>
                    <view class="work">
                        <view class="_icon">
                            <image src="@/static/images/customerPage/icon_work.png" mode="scaleToFill" />
                        </view>
                        <view class="_text">{{ item.workType }}</view>
                    </view>
                    <view class="address">
                        <view class="_icon">
                            <image src="@/static/images/customerPage/icon_address.png" mode="scaleToFill" />
                        </view>
                        <view class="_text">{{ item.workPlace }}</view>
                    </view>
                    <view class="worker" v-if="checkChineseName(item.workerName as string)">
                        <view class="_icon">
                            <image src="@/static/images/customerPage/icon_worker.png" mode="scaleToFill" />
                        </view>
                        <view class="_text">{{ item.workerName?.substring(0,1) + '师傅' }} {{ item.workerMobile}}</view>
                    </view>
                    <view class="time">
                        <view class="_icon">
                            <image src="@/static/images/customerPage/icon_time.png" mode="scaleToFill" />
                        </view>
                        <view class="_text">{{ item.workDate }}</view>
                    </view>
                </view>
                <view class="order_card_foot flex_r">
                    <view class="order_card_foot_r flex_c" @click="toDetial(item)">订单详情</view>
                </view>
            </view>
        </view>
        <up-empty mode="order" marginTop="180" v-else></up-empty>
    </view>
</template>

<script setup lang="ts">
/*
* 已接单订单状态说明 显示订单编号 按钮显示为查看详情
*   1 进行中======>客户只能查看发单内容,不能修改,可以联系师傅,查看师傅以前客户的评价
*   2 待确认======>查看简略订单信息(时间,地点,干活内容),订单进度记录,干活拍照,添加评价,确认提交
*   3 已完成=====>完成状态,不能进行任务操作
*/
import { ref } from "vue";
import type { OrderParams } from "@/types/order"
import { checkChineseName } from "@/utils/Validate";
const emit = defineEmits(["changeState"])
defineProps<{
    acceptOrderList: OrderParams[]
}>()

const nodeStatus = ref<number>(1)
const changeState = ((e: number) => {
    emit("changeState", e)
    nodeStatus.value = e
})
// 跳转订单详情
const toDetial = ((item: any) => {
    let status = nodeStatus.value
    uni.navigateTo({
        url: `/pages/customerPage/orderDetial/orderDetial?status=${status}&id=${item.id}`
    })
})
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
}

.nav {
    width: 100%;
    height: 110rpx;
    background-color: #F8F8F8;
    padding: 0 24rpx;
    box-sizing: border-box;
    position: fixed;
    top:94rpx;
    left: 0;
}

.nav_item {
    width: 216rpx;
    height: 62rpx;
    background: #FFFFFF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    font-size: 26rpx;
    color: #555555;
}

.active {
    background: #FE6E04;
    font-weight: 500;
    color: #FFFFFF
}

.list {
    width: 698rpx;
    margin: 0 auto;
    margin-top: 100rpx;
    padding-bottom: 216rpx;
}

.order_card {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
}

.order_card_head {
    width: 100%;
    height: 94rpx;
    border-bottom: 2rpx solid #F8F8F8;

    &_l {
        font-weight: 500;
        font-size: 30rpx;
        color: #222222;
    }

    &_r {
        font-size: 26rpx;
    }
}

.order_card_content {
    width: 100%;
    border-bottom: 2rpx solid #F8F8F8;

    .order_id {
        font-size: 28rpx;
        color: #222222;
        margin-top: 24rpx;
    }

    .work,
    .address,
    .worker {
        width: 100%;
        min-height: 40rpx;
        display: flex;
        align-items: flex-start;
        margin-top: 24rpx;
    }

    ._icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 14rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    ._text {
        width: calc(100% - 38rpx - 14rpx);
        font-size: 28rpx;
        color: #222222;
    }

    .time {
        width: 100%;
        min-height: 40rpx;
        display: flex;
        align-items: flex-start;
        margin: 26rpx 0;

        ._icon {
            width: 28rpx;
            height: 28rpx;
        }

        ._text {
            color: #888888;
        }
    }
}

.order_card_foot {
    width: 100%;
    height: 102rpx;

    &_l {
        font-size: 30rpx;
        color: #888888;
    }

    &_r {
        width: fit-content;
        background: #FE6E04;
        border-radius: 35rpx 35rpx 35rpx 35rpx;
        font-size: 30rpx;
        color: #FFFFFF;
        padding: 12rpx 40rpx;
        letter-spacing: 0.1em;
    }
}
</style>